<template>
  <input-table style="width:100%" :noIndexColumn="true"
               v-model="$model" :buttons="false" :border="false">
    <el-table-column align="left" label="语言" width="60">
      <template v-slot="scope">
        <el-tag>{{ scope.row.language }}</el-tag>
      </template>
    </el-table-column>


    <el-table-column align="left" label="设置" min-width="300">
      <template v-slot="scope">

        <kp label="钩子">
          <el-button size="small" @click="hook_click(scope.row,'preBuild')"
                     :type="scope.row.preBuild ? 'warning' : ''">编译前
          </el-button>
          <el-button size="small" @click="hook_click(scope.row,'postBuild')"
                     :type="scope.row.postBuild ? 'warning' : ''">编译后
          </el-button>
          <el-button size="small" @click="hook_click(scope.row,'preDeploy')"
                     :type="scope.row.preDeploy ? 'warning' : ''">部署前
          </el-button>
          <el-button size="small" @click="hook_click(scope.row,'postDeploy')"
                     :type="scope.row.postDeploy ? 'warning' : ''">部署后
          </el-button>
        </kp>

        <kp label="资源">

          <el-button size="small" @click="hook_click(scope.row,'dockerfile')"
                     :type="scope.row.dockerfile ? 'warning' : ''">Dockerfile
          </el-button>

          <el-button size="small" @click="hook_click(scope.row,'deploymentYaml')"
                     :type="scope.row.deploymentYaml ? 'warning' : ''">DepYml
          </el-button>

          <el-button size="small" @click="hook_click(scope.row,'serviceYaml')"
                     :type="scope.row.serviceYaml ? 'warning' : ''">ServYml
          </el-button>

        </kp>

      </template>
    </el-table-column>
    <el-table-column align="left" label="亲和性" min-width="360" >
      <template v-slot="scope">


        <input-table style="width:100%" size="small" :stripe="false" :border="false"
                     v-model="scope.row.affinitySettings" @add="v=>{ v.inOrNot = true}">
          <el-table-column align="center" label="正则" minWidth="80">
            <template v-slot="scope">
              <el-input v-model="scope.row.antPathMatcher" chk="*" style="width:100%"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="node-role" minWidth="120">
            <template v-slot="scope">
              <div style="display: flex;align-items: center;">
                <el-switch v-model="scope.row.inOrNot"
                           inline-prompt
                           style=" --el-switch-off-color: #ff4949"
                           active-text="in"
                           inactive-text="not in"/>

                <el-input v-model="scope.row.nodeRole" chk="*" style="min-width:40px;"/>
              </div>
            </template>
          </el-table-column>
        </input-table>

      </template>
    </el-table-column>

    <el-table-column align="left" label="镜像(@Harbor@/tools)" width="680">
      <template v-slot="scope">
        <kp v-for="item in scope.row.languageVersionSettings" :key="item.languageVersion"
            :label="item.languageVersion">


          <label style="white-space:nowrap"> 编译:</label>
          <el-input v-model="item.buildImage" style="width: 180px"/>
          <label style="white-space:nowrap">, 运行:</label>
          <el-input v-model="item.runImage" style="width: 160px;margin-right:10px;"/>


          <el-button size="small" @click="hook_click(item,'deploymentYaml' )"
                     :type="item.deploymentYaml ? 'warning' : ''">DepYml
          </el-button>
        </kp>

      </template>

    </el-table-column>


  </input-table>


  <el-dialog v-model="$data.dlg_show" width="66vw" :title="$data.dlg_field + '脚本'">
    <div style="display: flex; flex-direction: column;">
      <el-input v-model="$data.dlg_input" type="textarea" :rows="20"></el-input>
      <el-button @click="hook_ok_click" style="margin: 8px auto;width:80px;">确定</el-button>
    </div>
  </el-dialog>


  <div style="background-color: white;padding:10px;">
    <div style="font-weight: bold;margin:8px 0">应用变量:</div>
    <pre style="line-height: 24px;border:solid 1px #ccc;padding:10px;">

1. appName: 界面定义的应用名，后端=spring.application.name , 前端=k8s应用名
2. serviceName: 部署到 k8s 的服务名，可能在 appName 基础上添加了前后缀。
3. folder: 前端应用在Git中的相对目录
4. vpath: 前端应用的虚拟目录
5. language: 开发语言(注意大小写) Java,Vue,Node,Python,Nuxt,Php
6. languageVersion: 开发语言的版本
7. productLineCode: 产品线编码
8. productLineName: 产品线名称
9. gitBranch: 部署时的分支名
10. imageTagVersion: 镜像版本号
11. fullImageVersion: 完整镜像= imageTagPrefix + serviceName + ":" + imageTagVersion
</pre>

    <div style="font-weight: bold;margin:8px 0">环境变量:</div>
    <pre style="line-height: 24px;border:solid 1px #ccc;padding:10px;">

1. namespace: 当前应用所在的k8s名称空间。
2. profile: 当前环境获取的 profile 参数。
3. profiles: 当前环境获取的 profile 参数 + 当前环境微服务类型参数。
4. msDeployEnvEnum: 当前环境微服务类型参数（boot,k8s,nacos,consol）
5. harborHost: 当前环境配置的私仓
6. imageTagPrefix: 镜像前缀。
7. maxMemory: 当前环境配置的最大内存，以Mi结尾。
8. javaOpts: 当前环境获取的Jvm配置参数。
9. javaArgs: 当前环境获取的Java运行参数。
10. dockerBuildImage: Dockerfile中使用的基础镜像，不是容器中运行的应用镜像。


</pre>

<pre style="line-height: 24px;border:solid 1px #ccc;padding:10px;">
需要前后添加 @ ,变量名可以使用 小驼峰 或 连字符格式，如： @appName@ , @app-name@
可以对变量的值进行如下处理：使用$b(内容)表示大驼峰，$s(内容)表示小驼峰， $k((内容)表示连字符
</pre>
  </div>
</template>

<script setup>

defineOptions({
  name: "k8s-language-config",
  inheritAttrs: true,
});


const $props = defineProps({
  id: {type: String},
  action: {type: String},
  title: {type: String}
});

const $data = reactive({
  dlg_show: false,
  dlg_input: ""
});

const $model = defineModel({type: Array});

const hook_ok_click = function () {
  $data.dlg_show = false;
  $data.dlg_row[$data.dlg_field] = $data.dlg_input;
};


const hook_click = function (row, field) {
  $data.dlg_show = true;
  $data.dlg_row = row;
  $data.dlg_field = field;
  $data.dlg_input = $data.dlg_row[$data.dlg_field];
};


const patchData = () => {
  var getLanguageVersionSettings = function (lang) {
    return jv.ops.versions[lang].map(it => {
      return {languageVersion: it}
    });
  }
  var def = [
    {
      language: "Java",
      maxMemory: 2000,
      languageVersionSettings: getLanguageVersionSettings("Java")
    },
    {
      language: "Vue",
      maxMemory: 100,
      languageVersionSettings: getLanguageVersionSettings("Vue")
    },
    {
      language: "Node",
      maxMemory: 1000,
      languageVersionSettings: getLanguageVersionSettings("Node")
    },
    {
      language: "Nuxt",
      maxMemory: 1000,
      languageVersionSettings: getLanguageVersionSettings("Nuxt")
    },
    {
      language: "Python",
      maxMemory: 1000,
      languageVersionSettings: getLanguageVersionSettings("Python")
    }
  ];

  var list = $model.value;

  if (!list || !list.length) {
    $model.value = def;
    return;
  }


  def.forEach(item => {
    var finded = list.find(it => it.language == item.language);
    if (!finded) {
      list.push(item)
    } else {
      if (!finded.languageVersionSettings || !finded.languageVersionSettings.length) {
        finded.languageVersionSettings = item.languageVersionSettings;
      } else {
        //合并
        item.languageVersionSettings.forEach(it => {
          var langVersion = it.languageVersion;
          if (!finded.languageVersionSettings.some(it => it.languageVersion == langVersion)) {
            finded.languageVersionSettings.push({languageVersion: langVersion});
          }
        })
      }
    }
  });

}

watch($model, v => {
  patchData();
}, {immediate: true});

</script>

<style lang="scss" scoped>

::v-deep(.kp) {
  border-color: #b3b3b3;

  .k {
    background-color: #b3b3b3;
    color: blue;
  }

  * {
    font-size: 13px;
  }

  input {
    height: 26px;
  }
}
</style>